<template>
  <div>
    <el-alert close-text="Get!" style="margin-bottom: 10px" type="info">
      <div>1、输入 接口ID、接口名称、接口参数 后回车或单击搜索可以搜索对应数据；</div>
      <div>2、双击表格行，可以快速跳转到对应数据。</div>
    </el-alert>
    <el-form ref="dataForm" :model="temp" :rules="rules" label-position="right" label-width="0px">
      <el-row :gutter="10">
        <el-form-item label="" prop="findStr">
          <el-col :span="22">
            <el-input v-model="temp.findStr" placeholder="请输入需要搜索的 接口ID 或 接口名称 或 接口参数" @keyup.enter.native="search" />
          </el-col>
          <el-col :span="2">
            <el-tooltip :open-delay="500" content="保存" placement="top">
              <el-button class="filter-item" icon="el-icon-search" type="primary" @click="search">搜索</el-button>
            </el-tooltip>
          </el-col>
        </el-form-item>
      </el-row>
    </el-form>
    <el-table v-loading="listLoading" :data="list" border element-loading-text="Loading" fit height="200px" highlight-current-row size="mini" @row-click="clickRow" @row-dblclick="dblclickRow">
      <el-table-column align="center" label="ID" prop="id" width="80">
        <template v-slot="{row}">
          {{ row.id }}
        </template>
      </el-table-column>
      <el-table-column label="接口名称" prop="name">
        <template v-slot="{row}">
          {{ row.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="设计者" prop="name" width="120px">
        <template v-slot="{row}">
          {{ row.designer }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { search } from '@/api/functional_test/test_data_manage/api'
import { getElementParent } from '@/api/functional_test/catalog'

export default {
  props: {
    type: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      temp: {
        projectId: this.$store.getters.projectId,
        type: this.type,
        findStr: ''
      },
      listLoading: false, // 列表加载状态
      list: [], // 列表数据
      clickTime: null, // 单击计时器（为了避免双击时会触发两次单击问题）
      rules: {
        findStr: [
          { required: true, message: '搜索内容不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
  },
  created() {
  },
  mounted() {
  },
  methods: {
    // 单击 搜索 按钮
    search() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.listLoading = true
          search(this.temp).then(response => {
            this.list = response.data
            this.listLoading = false
          }).catch(() => {
            this.listLoading = false
          })
        }
      })
    },
    // 单击 表格行
    clickRow(row) {
      clearTimeout(this.clickTime) // 清除 单击计时器
    },
    // 双击 表格行
    dblclickRow(row) {
      clearTimeout(this.clickTime) // 清除 单击计时器
      getElementParent({ type: this.type, id: row.id }).then(response => {
        this.$emit('dblclickResultRow', response.data)
      })
    }
  }
}
</script>
